<template>
  <div 
        class="filter-box flex  mar-t20"
        :class="{'filter-box2': list[0]?.valus[0]?.suk_describe}"
        v-for="(item, index) in list"
        :key="index"
    >
        <div class="filter-label mar-r20" :class="[!list[0]?.valus[0]?.suk_describe ? 'w-56' : 'w-70']">{{ item.attr_name }}</div>
        <div class="filter-item flex flex-a flex-wrap" v-if="!list[0]?.valus[0]?.suk_describe">
            <div
                class="filter-radio mar-r10 padlr10 flex-center"
                v-for="(childItem, childIndex) in item.valus"
                :key="childIndex"
                :class="{ selectRadio: childIndex === item.radioCurrent, 'mar-b10': childItem.suk.length > 6}"
                @click="filterChange(item, childIndex)"
            >
                {{ childItem.suk }}
            </div>
        </div>
        <div class="flex flex-a" v-else>
            <div
                class="filter-radio mar-r20 padlr16 padtb10 "
                v-for="(childItem, childIndex) in item.valus"
                :key="childIndex"
                :class="{ selectRadio: childIndex === item.radioCurrent }"
                @click="filterChange(item, childIndex)"
            >
                <div class="child-name">{{ childItem.suk }}</div>
                <div class="child-tips mar-t6">{{ childItem.suk_describe }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
/**
 * filter 组件
*/
import { ref, watchEffect , defineProps, defineEmits } from "vue"
const props = defineProps({
    filterList: {
        type: Array,
        default: [],
    },
    styleType: {
        type: Number,
        default: 1
    }
})
const emit = defineEmits(['radioChange'])

let list = ref([])
const filterChange = (item, index) => {
    // console.log(list.value[index]); 
    // list.value[index].radioCurrent = index;
    item.radioCurrent = index;
    console.log(item, "--item");
    emit('radioChange', index)
}

watchEffect(() => { 
    list.value = props.filterList;
})
</script>

<style lang="scss" scoped>
.filter-box {
    .filter-item {
        width: calc(100% - 76px);
    }
    .filter-label {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        color: #575966;
    }
    .filter-radio {
        height: 28px;
        background: #ffffff;
        border-radius: 2px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        color: #181818;
        // line-height: 28px;
    }
    .selectRadio {
        background: #dce9ff;
        border: 1px solid #0052d9;
        color: #0052d9;
    }

    
}
.filter-box2 {
    .filter-radio {
        background: #ffffff;
        border: 1px solid #fff;
        border-radius: 2px;
        height: auto;
        min-width: 130px;
        .child-name {
            font-size: 14px;
            font-family: PingFang SC, PingFang SC-Semibold;
            font-weight: Semibold;
            text-align: left;
            color: #121924;
        }
        .child-tips {
            font-size: 12px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: Regular;
            text-align: left;
            color: #8c919a;
        }
    }
    .selectRadio {
        background: #dce9ff;
        border: 1px solid #0052d9;
        .child-name,
        .child-tips {
            color: #0052d9;
        }
    }
}

</style>